<template>
  <view class="field-stepper numberBox field-form-item">
    <u-form-item :label="label" :required="required" :prop="prop">
      <u-number-box
        :step="step"
        :min="min"
        :max="max"
        :input-width="inputWidth"
        :input-height="inputHeight"
        :long-press="true"
        :value="value"
        :disabled="disabled"
        @change="onChange"
      />
    </u-form-item>
  </view>
</template>

<script>
import { validateWidget } from '@/utils/validate.js';

export default {
  name: 'fieldStepper',
  props: {
    label: {
      type: String
    },
    value: {
      type: Number
    },
    prop: {
      type: String
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 9999
    },
    step: {
      type: Number,
      default: 1
    },
    inputWidth: {
      type: String,
      default: '64'
    },
    inputHeight: {
      type: String,
      default: '56'
    },
    integer: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dirty: false,
      errorMessage: ''
    }
  },
  methods: {
    onChange (val) {
      this.$emit('input', val.value);
      this.$emit('change', val.value);
      this.dirty = true;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    },
    validateWidget() {
      console.log('stepper field', this.value, this.rules);
      return new Promise((resolve, reject) => {
        validateWidget(this.rules, this.value).then(res => {
          this.errorMessage = '';
          resolve();
        }).catch(e => {
          this.errorMessage = e;
          resolve(e)
        });
      });
    }
  }
}
</script>

<style>
	.numberBox{}
	
</style>
